<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	background-color: #ebebda;
}

#bodydiv {
	margin: auto;
	width: 1000px;
}

#logindiv {
	margin: auto;
	width: 350px;
	height: 300px;
	margin-top: 300px;
	border: 1px solid #ccc;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	background-color: #b7c9ff;
	background: -webkit-gradient(linear, left top, left bottom, from(#dee2eb),
		to(rgba(118, 144, 177, 0.81)));
}

#loginform {
	margin: 40px 0px;
}

#loginform input {
	margin-bottom: 30px;
	height: 30px;
	margin-top: 5px;
	margin-left: 30px;
	width: 80%;
	border-radius: 5px;
}

span {
	margin-left: 30px;
	font: bold 16px/22px Arial, Helvetica, Sans-serif;
	color: #5a5757;
}

#btndiv input, .mybtn {
	width: 100px;
	height: 40px;
	margin-left: 45px;
	margin-top: 10px;
	border-radius: 3px;
	border-radius: 15px;
	background: #aacef2;
	background: -webkit-gradient(linear, left top, left bottom, from(#dae2e6),
		to(#7acbed));
	border: 1px solid #7db0cc !important;
	cursor: pointer;
	font: bold 15px/14px Verdana, Tahomma, Geneva;
	color: #ffffff;
}

.mybtn:active {
	background: #a1d8f0;
	background: -moz-linear-gradient(top, #7acbed, #badff3);
}

#close {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0);
	display: none;
}

#registDiv {
	margin:auto;
	margin-top:100px;
	padding: 50px 0px;
	background-color: #ebebda;
	width:400px;
}

#registform {
	width: 100%;
	padding : 20px 30px;
	padding-top:100px;
	background: -webkit-gradient(linear, left top, left bottom, from(#dee2eb),
		to(rgba(118, 144, 177, 1)));
	padding: 20px 30px;
	border-radius: 20px;
}

#registform input {
	margin-bottom: 30px;
	height: 30px;
	margin-top: 5px;
	margin-left: 30px;
	width: 80%;
	border-radius: 5px;
}
</style>
</head>
<body>
	<div id="bodydiv">
		<div id="logindiv">
			<form id="loginform" action="login" method="post">
				<span>Username:</span> <br> <input type="text" name="username">
				<br> <span>Password: </span> <br> <input type="password"
					name="password">
				<div id="btndiv">
					<input type="button" id="register" value="regist" class="mybtn">
					<input type="submit" name="login" value="login" class="mybtn">
				</div>
			</form>
		</div>
	</div>

	<div id="close">
		<div id="registDiv">
			<form id="registform" action="regist" method="post">
				<br><br>
				<span>Name:</span> <br> <input type="text" name="cPersonName">
				<br> <span>Password: </span> <br> <input type="password"
					name="cPassword"> <br> <span>Tel:</span> <br> <input
					type="text" name="cTel"
					placeholder="It will become your username when you login.">
				<br> <span>Location:</span> <br> <input type="text"
					name="cLocation">
				<div>
					<input type="button" value="cancel" class="mybtn" id="cancel">
					<input type="submit" name="regist" value="regist" class="mybtn">
				</div>
			</form>
		</div>
	</div>
</body>
<script type="text/javascript">
	window.onload = function() {
		var registbtn = document.getElementById("register");
		registbtn.onclick = function() {
			var registdiv = document.getElementById("close");
			registdiv.style.display = "block";
		}
		var cancelbtn = document.getElementById("cancel");
		cancelbtn.onclick = function() {
			var registdiv = document.getElementById("close");
			registdiv.style.display = "none";
		}

	}
</script>
</html>